<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cuda</title>
	<link rel="shortcut icon" href="img/ico.png" type="image/png">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/media.css">
</head>
<body>
	<div class="header-wraper">
		<div class="header">
			<div class="header-top">
				<div class="logo">
					<a href="#">
						<img src="img/logo.png" alt="">
					</a>
				</div>
				<div class="header-links">
					<a href="#" class="header-link">HOME</a>
					<a href="#services" class="header-link">ABOUT</a>
					<a href="#works" class="header-link">WORK</a>
					<a href="#" class="header-link">BLOG</a>
					<a href="#contact" class="header-link">CONTACT</a>
				</div>
			</div>
			<h1 class="header-title">Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
			<div class="header-button-wraper">
				<a href="#" class="header-button">WORK WITH US!</a>
			</div>
		</div>
	</div>
	<div class="content-wraper">
		<div class="content">
			<div class="services-wraper" id="services">
			    <div class="services">
				    <h2 class="services-title">SERVICES WE PROWIDE</h2>
				    <h4 class="services-subtitle">We are working with both individuals and usinesses from all over the globe to create awesome websites and applications.</h4>
				    <div class="cards">
					    <div class="card">
						    <img src="img/Flagicon.png" alt="">
						    <div class="card-title">BRANDING</div>
						    <div class="card-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</div>
					    </div>
					    <div class="card">
						    <img src="img/Crayon.png" alt="">
						    <div class="card-title">DESIGN</div>
						    <div class="card-description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</div>
					    </div>
					    <div class="card">
						    <img src="img/Shape16.png" id="bag" alt="">
						    <div class="card-title">DEVELOPMENT</div>
						    <div class="card-description">At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium.</div>
					    </div>
					    <div class="card">
						    <img src="img/Rocket.png" alt="">
						    <div class="card-title">ROCKET SCIENCE</div>
						    <div class="card-description">Et harum quidem rerum est et expedita distinctio. Nam libero tempore.</div>
					    </div>
				    </div>
			    </div>
			</div>
			<div class="team-wraper">
				<div class="team">
					<h2 class="team-title">MEET OUR BEAUTIFUL TEEM</h2>
					<h4 class="team-subtitle">We are a small team of designers and developers, who help brands with big ideas.</h4>
					<div class="team-cards">
						<div class="team-card">
							<img src="img/grayAvatar.jpg" alt="">
							<h6 class="team-card-title">ANNE HATHAWEY</h6>
							<p class="team-card-skils">SEO / Marketing Guru</p>
							<p class="team-card-subtitle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
							<div class="team-card-contact">
								<img src="img/Twitter.png" alt="contact-ico">
								<img src="img/Fb.png" alt="contact-ico">
								<img src="img/LinkedIn.png" alt="contact-ico">
								<img src="img/Mail.png" alt="contact-ico">
							</div>
						</div>
						<div class="team-card">
							<img src="img/grayAvatar.jpg" alt="">
							<h6 class="team-card-title">KETE UPTON</h6>
							<p class="team-card-skils">Creative Director</p>
							<p class="team-card-subtitle">Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non diam proident</p>
							<div class="team-card-contact">
								<img src="img/Twitter.png" alt="contact-ico">
								<img src="img/LinkedIn.png" alt="contact-ico">
								<img src="img/Мail.png" alt="contact-ico">
							</div>
						</div>
						<div class="team-card">
							<img src="img/grayAvatar.jpg" alt="">
							<h6 class="team-card-title">OLIVIA WILD</h6>
							<p class="team-card-skils">Lead Designer</p>
							<p class="team-card-subtitle">Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem nesciunt</p>
							<div class="team-card-contact">
								<img src="img/Twitter.png" alt="contact-ico">
								<img src="img/Fb.png" alt="contact-ico">
								<img src="img/LinkedIn.png" alt="contact-ico">
								<img src="img/Mail.png" alt="contact-ico">
							</div>
						</div>
						<div class="team-card">
							<img src="img/grayAvatar.jpg" alt="">
							<h6 class="team-card-title">ASHLEY GREENE</h6>
							<p class="team-card-skils">SEO / Developer</p>
							<p class="team-card-subtitle">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
							<div class="team-card-contact">
								<img src="img/Twitter.png" alt="contact-ico">
								<img src="img/Fb.png" alt="contact-ico">
								<img src="img/Mail.png" alt="contact-ico">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="skills-wraper">
				<div class="skills">
					<h2 class="skills-title">WE GOT SKILLS!</h2>
					<h4 class="skills-subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4>
					<div class="skills-progressBars">
						<div class="skill">
							<div class="skill-pragressBar">
								<img src="img/webProgress.png" alt="progressBar" class="progressImg">
							</div>
							<p class="skill-percent">90%</p>
							<p class="skill-discription">WEB DESIGN</p>
						</div>
						<div class="skill">
							<div class="skill-pragressBar">
								<img src="img/htmlProgress.png" alt="progressBar" class="progressImg">
							</div>
							<p class="skill-percent">75%</p>
							<p class="skill-discription">HTML / CSS</p>
						</div>
						<div class="skill">
							<div class="skill-pragressBar">
								<img src="img/graphicProgress.png" alt="progressBar" class="progressImg">
							</div>
							<p class="skill-percent">70%</p>
							<p class="skill-discription">GRAPHIC DESIGN</p>
						</div>
						<div class="skill">
							<div class="skill-pragressBar">
								<img src="img/ulProgress.png" alt="progressBar" class="progressImg">
							</div>
							<p class="skill-percent">85%</p>
							<p class="skill-discription">UI / UX</p>
						</div>
					</div>
				</div>
			</div>
			<div class="portfolio-wraper">
				<div class="portfolio" id="works">
					<h2 class="portfolio-title">OUR PORTFOLIO</h2>
					<h4 class="portfolio-subtitle">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit, sed quia non numquam</h4>
					<div class="portfolio-FILTERbuttons">
						<a href="#" class="portfolio-FILTERbutton">ALL</a>
						<a href="#" class="portfolio-FILTERbutton">WEB</a>
						<a href="#" class="portfolio-FILTERbutton">APPS</a>
						<a href="#" class="portfolio-FILTERbutton">ICONS</a>
					</div>
					<div class="works">
						<div class="work">
							<img src="img/work1.png" alt="image work" class="work-img">
							<h6 class="work-discription">ISOMETRIC PERSPECTIVE MOCK-UP</h6>
						</div>
						<div class="work">
							<img src="img/work2.png" alt="image work" class="work-img">
							<h6 class="work-discription">TIME ZONE APP UI</h6>
						</div>
						<div class="work">
							<img src="img/work3.png" alt="image work" class="work-img">
							<h6 class="work-discription">VIRO MEDIA PLAYERS UI</h6>
						</div>
						<div class="work">
							<img src="img/work4.png" alt="image work" class="work-img">
							<h6 class="work-discription">BLOG / MAGAZINE FLAT UI KIT</h6>
						</div>
					</div>
					<a href="#" class="portfolio-load-more">LOAD MORE PROJECTS</a>
				</div>
			</div>
			<div class="feedback-wraper">
				<div class="feedback">
					<h2 class="feedback-title">WHAT POEPLE SAY ABOUT US</h2>
					<h4 class="feedback-subtitle">Our clients love us!</h4>
					<div class="comments">
						<div class="coment">
							<img src="img/grayAvatar.jpg" alt="ava" class="comment-ava">
							<div class="comment-content">
								<span class="comment-text">“Nullam dapibus blandit orci, viverra gravida dui lobortis eget. Maecenas fringilla urna eu nisl scelerisque.”</span>
								<span class="comment-name">CANEL IMAN</span>
								<span class="user-post">CEO of Pinterest</span>
							</div>
						</div>
						<div class="coment">
							<img src="img/grayAvatar.jpg" alt="ava" class="comment-ava">
							<div class="comment-content">
								<span class="comment-text">“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.”</span>
								<span class="comment-name">ADRIANA LIMA</span>
								<span class="user-post">Founder of Instagram</span>
							</div>
						</div>
						<div class="coment">
							<img src="img/grayAvatar.jpg" alt="ava" class="comment-ava">
							<div class="comment-content">
								<span class="comment-text">“Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta.”</span>
								<span class="comment-name">ANNE HATHAWEY</span>
								<span class="user-post">Lead Designer at Behance</span>
							</div>
						</div>
						<div class="coment">
							<img src="img/grayAvatar.jpg" alt="ava" class="comment-ava">
							<div class="comment-content">
								<span class="comment-text">“Phasellus non purus vel arcu tempor commodo. Fusce semper, purus vel luctus molestie, risus sem cursus neque.”</span>
								<span class="comment-name">EMMA STONE</span>
								<span class="user-post">Co-founder of Shazam</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="contact-wraper">
			<div class="contact" id="contact">
				<h2 class="contact-title">GET IN TOUCH</h2>
				<h4 class="contact-subtitle">1600 Pennsylvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</h4>
				<form action="#">
					<div class="form-flex">
						<div class="input-wraper">
							<span id="contact-name">Your Name<span class="star">*</span></span>
							<input type="text" name="user-name" required placeholder="Your Name*">
							<span id="contact-email">Your Email<span class="star">*</span></span>
							<input type="email" name="user-email" required placeholder="Your Email*">
						</div>
						<span id="contact-message">Your Message<span class="star">*</span></span>
						<textarea name="message" id="message" cols="50" rows="10" placeholder="Your Message*" required></textarea>
					</div>
					<button type="submit">SEND MESSAGE</button>
				</form>
			</div>
		</div>
		<div class="footer-wraper">
			<div class="footer">
				<a href="#" class="footer-links">Facebook</a>
				<a href="#" class="footer-links">Twitter</a>
				<a href="#" class="footer-links">Google+</a>
				<a href="#" class="footer-links">LinkedIn</a>
				<a href="#" class="footer-links">Behance</a>
				<a href="#" class="footer-links">Dribbble</a>
				<a href="#" class="footer-links">GitHub</a>
			</div>
		</div>
	</div>
</body>
</html>
